<template>
  <div id="calculator">
    <input type="number" v-model="operand1" />
    <select v-model="operator">
      <option value="+">+</option>
      <option value="-">-</option>
    </select>
    <input type="number" v-model="operand2" />
    <button @click="calculate">Calculate</button>
    <p>Result: {{ result }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      operand1: 0,
      operand2: 0,
      operator: '+',
      result: 0
    };
  },
  methods: {
    calculate() {
      if (this.operator === '+') {
        this.result = this.operand1 + this.operand2;
      } else if (this.operator === '-') {
        this.result = this.operand1 - this.operand2;
      }
    }
  }
};
</script>
